<template>
    <el-drawer title="接口分类管理" :visible.sync="drawer" :wrapperClosable="false" ref="drawer" size="700px"
        :before-close="handleDrawerClose" class="SHZY-common-drawer">
        <div class="SHZY-flex-main">
            <div class="SHZY-common-head">
                <topOpts @add="addOrUpdateHandle()" />
                <div class="SHZY-common-head-right">
                    <el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
                        <el-link icon="icon-ym icon-ym-Refresh
                SHZY-common-head-icon" :underline="false" @click="reset()" />
                    </el-tooltip>
                </div>
            </div>
            <SHZY-table v-loading="listLoading" :data="tableData" row-key="id" default-expand-all
                :tree-props="{ children: 'children', hasChildren: '' }">
                <el-table-column prop="fullName" label="名称" />
                <el-table-column prop="category" label="类别" >
                    <template slot-scope="scope">
                            {{ scope.row.category == "ToExternal" ? "对外" : "对内" }}
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" />
                <el-table-column label="有效标志" prop="enabledMark" width="70" align="center">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.enabledMark == 1 ? 'success' : 'danger'" disable-transitions>
                            {{ scope.row.enabledMark == 1 ? "正常" : "停用" }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="130">
                    <template slot-scope="scope">
                        <tableOpts @edit="addOrUpdateHandle(scope.row.id)" @del="handleDel(scope.row.id)">
                        </tableOpts>
                    </template>
                </el-table-column>
            </SHZY-table>
            <TypeForm v-if="typeFormVisible" ref="TypeForm" @refreshDataList="getInterfaceList" />
        </div>
    </el-drawer>
</template>
<script>
import { getInterfaceList, delInterface} from '@/api/system/interface/interface'
import TypeForm from './Form'

export default {
    components: {
        TypeForm
    },
    data() {
        return {
            drawer: false,
            listLoading: false,
            btnLoading: false,
            typeFormVisible: false,
            tableData: []
        }
    },
    methods: {
        init() {
            this.drawer = true
            this.$nextTick(() => {
                this.getInterfaceList()
            })
        },
        getInterfaceList() {
            this.listLoading = true
            getInterfaceList().then(res => {
                this.tableData = res.data.list
                this.listLoading = false
            }).catch(() => {
                this.listLoading = false
            })
        },
        addOrUpdateHandle(id) {
            this.typeFormVisible = true
            this.$nextTick(() => {
                this.$refs.TypeForm.init(id)
            })
        },
        handleDel(id) {
            this.$confirm(this.$t('common.delTip'), this.$t('common.tipTitle'), {
                type: 'warning'
            }).then(() => {
                delInterface(id).then(res => {
                    this.$message({
                        type: 'success',
                        message: res.msg,
                        duration: 1500,
                        onClose: () => {
                            this.getInterfaceList()
                        }
                    })
                })
            }).catch(() => { })
        },
        reset() {
            this.getInterfaceList()
        },
        handleDrawerClose(done) {
            done();
            this.$emit('refreshDataList')
        },
    }
}
</script>
  